<template>
  <div class="item-list">
    <div class="item"
         v-for="(item, index) in items"
         :key="item.id"
         @click="DetailItems(item.id, index)">
      <img v-lazy="item.pic"
           alt="">
      <div class="item-info">
        <h4 class="title">{{ item.name }}</h4>
        <p class="content">{{ item.characteristic ? item.characteristic : '暂无描述' | itemTitle(10)}}</p>
        <div class="price-info">
          <p class="price"> {{ item.minPrice | itemPrice('￥')}} </p>
          <van-icon @click.stop="clickCart(item.id, index)"
                    class-prefix="icon"
                    name="shouye-jiarugouwuche"></van-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  filters: {
    itemTitle (v, len = 10) {
      if (v.length > len) {
        return v.substr(0, len) + '...'
      } else {
        return v
      }
    },
    itemPrice (v, sign = '$') {
      return sign + v
    }
  },
  methods: {
    DetailItems (id, index) {
      this.$emit('clickDetail', { id, index })
    },
    clickCart (id, index) {
      this.$emit('HomeAddCart', { id, index })
    }
  }
}

</script>

<style lang="scss" scoped>
.item {
  display: flex;
  background-color: #fff;
  margin: 10px 0;
  border-radius: 12px;
  overflow: hidden;
  height: 185px;
  img {
    width: 170px;
    height: 100%;
  }
  .item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 15px 10px 10px;
    font-size: 14px;
    .title {
      font-weight: bold;
    }
    .price-info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .price {
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 20px;
      }
      .icon {
        font-size: 26px;
        padding-bottom: 12px;
        color: #ff734c;
      }
    }
  }
}
</style>
